{extend name="main"}
{block name="style"}
<style type="text/css">
.wx-wechat{width: 320px;height: 560px;margin: 0 auto;position: relative;background-color: #eee;border:solid 1px #ddd;}
.wx-wechat .wx-wechat-header{width: 100%;height:64px;line-height:64px;background-color: #343434;color: #fff;text-align: center;}
.wx-wechat .wx-wechat-footer{font-size: .8rem;background-color: #fff;color: #343434;border-top: solid 1px #ddd;position: absolute;bottom:0;left:0;right: 0;text-align: center;}
.wx-wechat .wx-wechat-footer .row{margin: 0;}
.wx-wechat .wx-wechat-footer .Hui-iconfont{font-size: .6rem;margin-right: 3px;}
.wx-wechat .wx-wechat-footer .col{position: relative;}
.wx-wechat .wx-wechat-footer .col .wx-wechat-menu{list-style:none;padding-left:0;position: absolute;bottom:100%;left: 0;right: 0;border:solid 1px #ddd;border-radius: 6px;background-color: #fff;}
.wx-wechat .wx-wechat-footer .col .wx-wechat-menu .wx-wechat-menu-item{padding: 6px 0;position: relative;}
.wx-wechat .wx-wechat-footer .col .wx-wechat-menu .wx-wechat-menu-item:before{content: ' ';position:absolute;top:0px;left:20%;right: 20%;height: 1px;background-color: #ddd;}
.wx-wechat .wx-wechat-footer .col .wx-wechat-menu .wx-wechat-menu-item:nth-of-type(1):before{content: none;}
</style>
{/block}
{block name="body"}
<div class="p-3 bg-white">
	<div class="row mx-0">
		<div class="col">
			<div class="wx-wechat">
				<div class="wx-wechat-header">
					{:config('web.name')}
				</div>
				<div class="wx-wechat-footer">
					<div class="row">
						<div class="col pt-3 pb-3 pointer" v-for="(v,index) in menu" :class="{'border-left':index > 0}">
							<span class="d-block" @click="getMenu(index);"><i class="el-icon-menu"></i>{{v.title}}</span>
							<ul class="wx-wechat-menu">
								<li class="wx-wechat-menu-item" v-for="(va,key) in v.data" @click="getMenuTwo(index,key);">{{va.title}}</li>
								<li class="wx-wechat-menu-item" v-if="v.data.length < 5" @click="addMenuTwo(index);"><i class="el-icon-plus"></i></li>
							</ul>
						</div>
						<div class="col pt-3 pb-3 border-left pointer" v-if="menu.length < 3" @click="addMenu();"> <i class="el-icon-plus"></i> </div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-8">
			<div class="form" v-if="wechat.formwechat === 1">
				<el-form ref="form" label-width="120px">
				  <el-form-item label="名称">
				    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="4" show-word-limit></el-input>
				  </el-form-item>

				  <el-form-item label="类型">
				    <el-radio-group v-model="form.type">
				      <el-radio :label="'view'">打开链接[默认]</el-radio>
				      <el-radio :label="'click'">点击事件</el-radio>
				      <el-radio :label="'miniprogram'">打开小程序</el-radio>
				    </el-radio-group>
				  </el-form-item>

				  <el-form-item label="内容" v-if="form.type!='miniprogram'">
				    <el-input v-model="form.content" class="col-12 col-sm-3 pl-0 pr-0" :placeholder="form.type=='click'?'Content':'Links'"></el-input>
				  </el-form-item>
				  <div v-if="form.type=='miniprogram'">
					  <el-form-item label="URL">
					    <el-input v-model="form.url" class="col-12 col-sm-3 pl-0 pr-0" placeholder="URL"></el-input>
					  </el-form-item>
					  <el-form-item label="APPID">
					    <el-input v-model="form.appid" class="col-12 col-sm-3 pl-0 pr-0" placeholder="小程序APPID"></el-input>
					  </el-form-item>
					  <el-form-item label="路径">
					    <el-input v-model="form.pagepath" class="col-12 col-sm-3 pl-0 pr-0" placeholder="小程序路径"></el-input>
					    <p>首页：pages/common/home/home</p>
					  </el-form-item>
				  </div>
				  <el-form-item>
				    <el-button type="primary" v-if="menu.length < 3 && wechat.btnType === 'add'" @click="pushMenu();">保 存</el-button>
				    <el-button type="success" v-if="wechat.btnType === 'edit'" @click="editMenu();">保存到{{menu[wechat.editMenuIndex].title}}</el-button>
				    <el-button @click="wechat.formwechat=false;">取 消</el-button>
				    <el-button type="danger" v-if="wechat.btnType === 'edit'" @click="delMenu();">删 除</el-button>
				  </el-form-item>
				</el-form>
			</div>
			<div class="form" v-if="wechat.formwechat === 2">
				<el-form ref="form" label-width="120px">
				  <el-form-item label="二级名称">
				    <el-input v-model="formTwo.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="4" show-word-limit></el-input>
				  </el-form-item>

				  <el-form-item label="类型">
				    <el-radio-group v-model="formTwo.type">
				      <el-radio :label="'view'">打开链接[默认]</el-radio>
				      <el-radio :label="'click'">点击事件</el-radio>
				      <el-radio :label="'miniprogram'">打开小程序</el-radio>
				    </el-radio-group>
				  </el-form-item>

				  <el-form-item label="内容" v-if="formTwo.type!='miniprogram'">
				    <el-input v-model="formTwo.content" class="col-12 col-sm-3 pl-0 pr-0" :placeholder="formTwo.type=='click'?'Content':'Links'"></el-input>
				  </el-form-item>
				  <div v-if="formTwo.type=='miniprogram'">
					  <el-form-item label="URL">
					    <el-input v-model="formTwo.url" class="col-12 col-sm-3 pl-0 pr-0" placeholder="URL"></el-input>
					  </el-form-item>
					  <el-form-item label="APPID">
					    <el-input v-model="formTwo.appid" class="col-12 col-sm-3 pl-0 pr-0" placeholder="小程序APPID"></el-input>
					  </el-form-item>
					  <el-form-item label="路径">
					    <el-input v-model="formTwo.pagepath" class="col-12 col-sm-3 pl-0 pr-0" placeholder="小程序路径"></el-input>
					    <p>首页：pages/common/home/home</p>
					  </el-form-item>
				  </div>
				  <el-form-item>
				    <el-button type="primary" v-if="menu[wechat.MenuIndex].data.length < 5 && wechat.btnType === 'add'" @click="pushMenuTwo();">保存到{{menu[wechat.MenuIndex].title}}</el-button>
				    <el-button type="success" v-if="wechat.btnType === 'edit'" @click="editMenuTwo();">保存到{{menu[wechat.MenuIndex].data[wechat.editMenuIndex].title}}</el-button>
				    <el-button @click="wechat.formwechat=false;">取 消</el-button>
				    <el-button type="danger" v-if="wechat.btnType === 'edit'" @click="delMenuTwo();">删 除</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</div>
	<div class="form-group pt-5">
		<div class="custom-control text-center">
		    <el-button type="primary" @click="submitForm();">保存到系统</el-button>
		    <el-button type="success" @click="submitWx();">发布到微信</el-button>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="wxmenu"}
	var wxmenu=[];
	{else/}
	var wxmenu={:json_encode($wxmenu,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
var vm=new Vue({
	el:'#app',
	data:{
		view:XYBase.view,
		wechat:{
			btnType:'add',
			formwechat:false,
			MenuIndex:'',
			editMenuIndex:'',
		},
		menu:wxmenu,
		form:{
			title:'',
			type:'wechat',
			data:[],
			content:'',
			url:'',
			appid:'',
			pagepath:'',
		},
		formTwo:{
			title:'',
			type:'wechat',
			content:'',
			url:'',
			appid:'',
			pagepath:'',
		}
	},
	watch:{
	    view:XYBase.viewWatch,
	},
	created(){
		XYBase.created(this);
	},
	methods:{
		addMenu:function(){
			this.form={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat={
				btnType:'add',
				formwechat:1,
				MenuIndex:'',
				editMenuIndex:'',
			};
		},
		pushMenu:function(){
			var D=this.form;
			if(!D.title){XYBase.msg('名称不能为空');return;}
			if(D.type=='miniprogram'){
				if(!D.url&&!D.appid&&!D.pagepath){XYBase.msg('URL,APPID,路径不能为空');return;}
			}else{
				if(!D.content){XYBase.msg('内容不能为空');return;}
			}
			this.menu.push(D);
			this.form={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			if(this.menu.length > 2){
				this.wechat.formwechat=false;
			}
		},
		getMenu:function(index) {
			var D=this.menu[index];
			this.form=D;
			this.menu[index]=D;
			this.wechat.editMenuIndex=index;
			this.wechat.formwechat=1;
			this.wechat.btnType='edit';
		},
		editMenu:function() {
			var D=this.form;
			if(!D.title){XYBase.msg('名称不能为空');return;}
			if(D.type=='miniprogram'){
				if(!D.url&&!D.appid&&!D.pagepath){XYBase.msg('URL,APPID,路径不能为空');return;}
			}else{
				if(!D.content){XYBase.msg('内容不能为空');return;}
			}
			this.menu[this.wechat.editMenuIndex]=D;
			this.form={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat.formwechat=false;
		},
		delMenu:function(){
			this.menu.splice(this.wechat.editMenuIndex,1);
			this.form={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat={
				btnType:'add',
				formwechat:false,
				MenuIndex:'',
				editMenuIndex:'',
			};
		},
		addMenuTwo:function(index){
			this.formTwo={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat={
				btnType:'add',
				formwechat:2,
				MenuIndex:index,
				editMenuIndex:'',
			};
		},
		pushMenuTwo:function(){
			var D=this.formTwo;
			if(!D.title){XYBase.msg('名称不能为空');return;}
			if(D.type=='miniprogram'){
				if(!D.url&&!D.appid&&!D.pagepath){XYBase.msg('URL,APPID,路径不能为空');return;}
			}else{
				if(!D.content){XYBase.msg('内容不能为空');return;}
			}
			this.menu[this.wechat.MenuIndex].data.push(D);
			this.formTwo={
				title:'',
				type:'wechat',
				data:[],
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			if(this.menu[this.wechat.MenuIndex].data.length > 4){
				this.wechat.formwechat=false;
			}
		},
		getMenuTwo:function(index,key) {
			var D=this.menu[index].data[key];
			this.formTwo=D;
			this.menu[index].data[key]=D;
			this.wechat.MenuIndex=index;
			this.wechat.editMenuIndex=key;
			this.wechat.formwechat=2;
			this.wechat.btnType='edit';
		},
		editMenuTwo:function() {
			var D=this.formTwo;
			if(!D.title){XYBase.msg('名称不能为空');return;}
			if(D.type=='miniprogram'){
				if(!D.url&&!D.appid&&!D.pagepath){XYBase.msg('URL,APPID,路径不能为空');return;}
			}else{
				if(!D.content){XYBase.msg('内容不能为空');return;}
			}
			this.menu[this.wechat.MenuIndex].data[this.wechat.editMenuIndexTwo]=D;
			this.formTwo={
				title:'',
				type:'wechat',
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat.formwechat=false;
		},
		delMenuTwo:function(){
			this.menu[this.wechat.MenuIndex].data.splice(this.wechat.editMenuIndex,1);
			this.formTwo={
				title:'',
				type:'wechat',
				content:'',
				url:'',
				appid:'',
				pagepath:'',
			};
			this.wechat={
				btnType:'add',
				formwechat:false,
				MenuIndex:'',
				editMenuIndex:'',
			};
		},
		submitForm:function(){
			var D={menu:this.menu};
			var loadLayer=XYBase.openloading();
			$.ajax({
				url:'/wechat/saveMenu',
				data:D,
				type:'post',
				dataType:'json',
				success:function(ret){
					loadLayer.close();
					if(ret.code == 0){
						XYBase.success('保存成功');
					}else{
						XYBase.msg(ret.msg);
					}
				},
				error:function(err){
					loadLayer.close();
					console.log(err.responseText);
				}
			});
		},
		submitWx:function(){
			var loadLayer=XYBase.openloading();
			$.ajax({
				url:'/wechat/releaseMenu',
				data:{},
				type:'get',
				dataType:'json',
				success:function(ret){
					loadLayer.close();
					if(ret.code===0){
						XYBase.success(ret.msg);
					}else{
						XYBase.msg(ret.msg);
					}
				},
				error:function(err){
					loadLayer.close();
					console.log(err.responseText);
				}
			});
		}
	}
});
</script>
{/block}